<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>意见反馈</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--====== Favicon Icon ======-->
    <link rel="shortcut icon" href="assets/images/favicon.png" type="image/png">
    <!--====== Magnific Popup CSS ======-->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!--====== Slick CSS ======-->
    <link rel="stylesheet" href="assets/css/slick.css">
    <!--====== Line Icons CSS ======-->
    <link rel="stylesheet" href="assets/css/LineIcons.css">
    <!--====== Bootstrap CSS ======-->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!--====== Default CSS ======-->
    <link rel="stylesheet" href="assets/css/default.css">
    <!--====== Style CSS ======-->
    <link rel="stylesheet" href="assets/css/style.css">

</head>
<body>
<!-- 导入页眉 -->
<div class="header"> </div>

<!--====== 自定义代码开始 ======-->
<section id="about" class="about-area">
    <div class="container" >

        <!--====== 从这里开始 ======-->
        <div class="jumbotron" >
            <form id="form_all">
            <h2 align="center" style="color: #c82333;font-family:华文楷体" >
                兰州拉面博客反馈问卷
            </h2><br><br>
            <big>请留下您对兰州拉面博客的建议和意见</big>
            <div class="input-group input-group-lg">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroup-sizing-lg">反馈</span>
                </div>
                <input name="feedback" id="feedback" type="text" class="form-control" aria-label="Large" aria-describedby="feedback">
            </div>
            <br><br>
            <big>请问您这次使用兰州拉面博客是否满意(单选)</big>
            <div  class="custom-control custom-radio" >
                <input  type="radio" id="customRadio1" value="满意" name="satisfaction" class="custom-control-input" checked="checked">
                <label class="custom-control-label" for="customRadio1">满意</label>
            </div>
            <div class="custom-control custom-radio">
                <input type="radio" id="customRadio2" value="不满意" name="satisfaction" class="custom-control-input">
                <label class="custom-control-label" for="customRadio2">不满意</label>
            </div>
            <br><br>
            <big>您的电话号码是？</big>
            <div class="input-group input-group-sm mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="phone">电话</span>
                </div>
                <input name="phoneNumber" id="phoneNumber" type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
            </div>
            <br><br>
            <big>您最喜欢哪个博主(可以不填)</big>
            <div class="input-group input-group-sm mb-3">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="inputGroup-sizing-sm">博主</span>
                </div>
                <input name="blogger" id="blogger" type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
            </div><br>

            <button type="button" id="finsh" class="btn btn-primary btn-lg btn-block" onclick="formSubmit()">提交</button><br>
            <div class="row">
                <div class="col-xs-offset-3 col-xs-6" >
                </div>
            </div>
            </form>
            <div id="div_thanks_use" align="center"  style="display: none" >
                <h3>感谢使用！</h3>
            </div>
            </div>
        <!--====== 从这里结束 ======-->


    </div> <!-- container -->
</section>
<!--====== 自定义代码结束 ======-->


<!-- 导入页脚 -->
<div class="footer"></div>

<!--导入所有js文件-->
<!--====== Jquery js ======-->
<script src="assets/js/vendor/jquery-1.12.4.min.js"></script>
<script src="assets/js/vendor/modernizr-3.7.1.min.js"></script>
<!--====== Bootstrap js ======-->
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!--====== Slick js ======-->
<script src="assets/js/slick.min.js"></script>
<!--====== Magnific Popup js ======-->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<!--====== Ajax Contact js ======-->
<script src="assets/js/ajax-contact.js"></script>
<!--====== Isotope js ======-->
<script src="assets/js/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/isotope.pkgd.min.js"></script>
<!--====== Scrolling Nav js ======-->
<script src="assets/js/jquery.easing.min.js"></script>
<script src="assets/js/scrolling-nav.js"></script>
<!--====== Main js ======-->
<script src="assets/js/main.js"></script>
<script src="assets/validation-1.19.2/jquery.validate.min.js"></script>
<script src="assets/validation-1.19.2/localization/messages_zh.min.js"></script>
<script src="assets/js/util/HttpUtil.js"></script>
</body>
</html>
<script type="text/javascript">
    //在js中引入页眉页脚
    $(document).ready(function () {
        $('.header').load('header.html');
        $('.footer').load('footer.html');
    });

    $(function () {
        console.log("页面加载完成");
        init();
    });

    function init() {
        console.log("校验参数");
        $("#form_all").validate(
            {
            rules:{
                feedback:{required:true,maxlength:30},
                phoneNumber:{maxlength:11,minlength:6},

            },
            messages:{
                feedback: {
                    maxlength: "最多输入三十个字哦奥尼酱",
                    required: "不能为空哦",
                },
                phoneNumber: {
                    maxlength:"请输入6-11位的手机号码",
                    minlength:"请输入6-11位的手机号码",
                }
            }
        });
    }
    function formSubmit() {

        var feedback1 = $("#feedback").val();
        var phoneNumber1 = $("#phoneNumber").val();
        var blogger1 = $("#blogger").val();
        var a = $('input:radio:checked').val();
        let parm={feedback :feedback1,fbPhoneNumber:phoneNumber1,fbFavoriteBlogger:blogger1,fbSatisfaction:a };
        let url ="feedbackInsert.do";
        console.log(parm);
        doPost(url,parm,function (data) {
            $("#div_thanks_use").toggle();
            $("#finsh").toggle();

        });
    }
</script>
